<!--
 * @Author: lp 654528967@qq.com
 * @Date: 2022-05-11 15:04:31
 * @LastEditors: lp 654528967@qq.com
 * @LastEditTime: 2022-06-21 15:31:08
 * @FilePath: \nien-vue3-admin\src\views\myMission\businessHandling\processApplication\index.vue
 * @Description: 流程申请
-->
<template>
  <div>
    <customContainer ref="customContainer" :config="config" />
    <el-dialog v-model="dialogVisible" :title="title" :before-close="handleClose">
      <component :is="componentName" :key="$route.fullPath" ref="activeComponent" />
      <el-form :model="form">
        <el-form-item prop="remark" label="申请备注">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" :loading="btnLoading" @click="submit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { instanceStart } from '@/api/myMission/businessHandling/processApplication'

const components = import.meta.globEager('./components/**/*.vue')
/* 防止命名问题，组件名转小写 */
const transLowerCase = (files, isComponent) => {
  const transMap = {}
  for (const key in files) {
    if (Object.prototype.hasOwnProperty.call(files, key)) {
      if (isComponent) {
        transMap[key.replace(/(.*\/)*([^.]+).*/ig, ($1, $2, $3) => String($3).toLocaleLowerCase())] = files[key].default
      } else {
        transMap[key.replace(/(.*\/)*([^.]+).*/ig, ($1, $2, $3) => String($3).toLocaleLowerCase())] = files[key]
      }
    }
  }
  return transMap
}
const componentMap = transLowerCase(components, true)

export default {
  name: 'ProcessApplication',
  components: {
    ...componentMap,
  },
  setup() {
    const route = useRoute(), activeComponent = ref(), customContainer = ref()
    const componentName = String(route.name).toLocaleLowerCase()
    const configs = import.meta.globEager('./config/*.ts')
    const configMap = transLowerCase(configs, false)
    const { dialogVisible, config, title, cancel, validate, businessParam } = configMap[componentName].default({ $form: activeComponent })
    const form = ref({
      remark: '',
      processKey: 'process_1',
      businessParam: {},
      businessKey: '',
    })
    const handleClose = (done) => {
      ElMessageBox.confirm('你确定要关闭这个弹窗吗？')
      .then(() => {
        done()
      })
      .catch(() => {
      // catch error
      })
    }
    const btnLoading = ref(false) 
    const submit = async () => {
      btnLoading.value = true
      try {
        const businessParam = await validate()
        form.value.businessParam = JSON.stringify(businessParam) 
        const res = await instanceStart(form.value)
        ElMessage({
          type: 'success',
          message: res.msg,
        })
        dialogVisible.value = false
        customContainer.value.getList()
      } catch (err) {
        console.log(err)
      } finally {
        btnLoading.value = false
      }
    }
    return {
      form,
      submit,
      title,
      cancel,
      config,
      dialogVisible,
      componentName,
      activeComponent,
      handleClose,
      btnLoading,
      customContainer,
      businessParam,
    }
  },
}
</script>